<template>
  <div>
    <div>
      <el-tooltip content="保存" placement="top">
        <el-button
            type="success"
            size="default"
            icon="Select"
            @click="handleSave"
        >
          保存
        </el-button>
      </el-tooltip>
    </div>
    <div style="border: 1px solid #ccc; margin-top: 10px;">
      <Toolbar
          :editor="editorRef"
          :defaultConfig="toolbarConfig"
          mode="default"
          style="border-bottom: 1px solid #ccc"
      />
      <Editor
          :defaultConfig="editorConfig"
          mode="default"
          v-model="valueHtml"
          style="height: 400px; overflow-y: hidden;"
          @onCreated="handleCreated"
          @onChange="handleChange"
          @onDestroyed="handleDestroyed"
          @onFocus="handleFocus"
          @onBlur="handleBlur"
          @customAlert="customAlert"
          @customPaste="customPaste"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import '@wangeditor/editor/dist/css/style.css'
import {onBeforeUnmount, ref, shallowRef, onMounted} from 'vue'
import {Editor, Toolbar} from '@wangeditor/editor-for-vue'


// 编辑器实例，必须用 shallowRef，重要！
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref('<p>hello111</p>')

// 模拟 ajax 异步获取内容
onMounted(() => {
  setTimeout(() => {
    valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
  }, 1500)
})

const toolbarConfig = {}
const editorConfig = {
  placeholder: '请输入内容...',
  MENU_CONF: {
    uploadImage: {
      fieldName: 'file',
      server: import.meta.env.VITE_SERVE + 'upload/img',
      // 单个文件的最大体积限制，默认为 2M+
      maxFileSize: 10 * 1024 * 1024, // 10M
      onSuccess(file, res) {
        console.log('onSuccess', file, res)
      },
      // // 用户自定义插入图片
      customInsert(res, insertFn) {
        if (res.code === 200) {
          let url = res.msg;
          let alt = res.msg.slice(52);
          let href = res.msg;
          console.log("图片名称：" + alt);
          insertFn(url, alt, href);
        } else {
          alert(res.msg)
        }
      },
    },
    uploadVideo: {
      server: import.meta.env.VITE_SERVE + 'upload/img',
      fieldName: 'file',

      // 单个文件的最大体积限制，默认为 10M
      maxFileSize: 100 * 1024 * 1024, // 100M
      // 超时时间，默认为 30 秒
      timeout: 15 * 1000, // 15 秒
      onSuccess(file, res) {
        console.log('onSuccess', file, res)
      },
      // // 用户自定义插入图片
      customInsert(res, insertFn) {
        if (res.code === 200) {
          let url = res.msg;
          let alt = res.msg.slice(52);
          let href = res.msg;
          console.log("视频名称：" + alt);
          insertFn(url);
        } else {
          alert(res.msg)
        }
      },
    },
  },

}

// 组件销毁时，也及时销毁编辑器，重要！
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return

  editor.destroy()
})

// 编辑器创建完毕时的回调函数。
const handleCreated = (editor) => {
  console.log('created', editor);
  editorRef.value = editor // 记录 editor 实例，重要！
}

//编辑器内容、选区变化时的回调函数。
const handleChange = (editor) => {
  console.log('change:', editor.getHtml());
}

//编辑器销毁时的回调函数。调用 editor.destroy() 即可销毁编辑器
const handleDestroyed = (editor) => {
  console.log('destroyed', editor)
}

//编辑器 focus 时的回调函数。
const handleFocus = (editor) => {
  console.log('focus', editor)
}

//编辑器 blur 时的回调函数。
const handleBlur = (editor) => {
  console.log('blur', editor)
}

//自定义编辑器 alert 。如想用 antd 的 message 功能。
const customAlert = (info, type) => {
  alert(`【自定义提示】${type} - ${info}`)
}

//自定义粘贴。可阻止编辑器的默认粘贴，实现自己的粘贴逻辑。
const customPaste = (editor, event, callback) => {
  console.log('ClipboardEvent 粘贴事件对象', event)

  // 自定义插入内容
  editor.insertText('xxx')

  // 返回值（注意，vue 事件的返回值，不能用 return）
  callback(false) // 返回 false ，阻止默认粘贴行为
  // callback(true) // 返回 true ，继续默认的粘贴行为
}



const handleSave = () => {
  const editor = editorRef.value
  if (editor == null) return
  console.log('save',editor.getHtml())
}


</script>